<template>
  <div class="banner-container1">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item in listImg" :key="item.id">
        <img :src="item.pic" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script type="text/ecmascript-6">
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    props: {
      listImg: {
        type: Array
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    data() {
      return {
        swiperOption: {
          effect: 'fade',
          spaceBetween: 30,
          observeParents: true,
          autoplayDisableOnInteraction: true,
          centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    }
  }
</script>

<style>
  .swiper-container .swiper-wrapper {
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    text-align: left;
  }

  .banner-container1 .swiper-slide img {
    width: 730px;
    height: 336px;
    margin-left: 60px;
  }

</style>
